In questo articolo vorrei Introdurre e descrivere il funzionamento dello Sliding Menu, un originale sistema di navigazione, con il quale vorrei dare un esempio delle enormi potenzialità che il DOM del W3C, unito al JavaScript, può offrire. Lo script, infatti, si fonda su un esteso uso del DOM W3C e dei metodi e proprietà standard, che come vedremo possono liberare la nostra fantasia per creare applicazioni DHTML veramente accattivanti. Vediamo subito un esempio del menu.
Compatibilità
La compatibilità dello script è necessariamente vincolata al DOM W3C, perciò questo menu funzionerà solo in quei browser che offrono un consistente supporto al DOM, tra cui i principali sono: Explorer 5 (e superiori), Netscape 6 (e superiori).
Lo script non esegue alcuna L'arte dello sniffing: come riconoscere i browser delle proprietà e dei metodi utilizzati, lasciando il compito ai webmasters e alle loro scelte.
Un possibile codice, per determinare se il browser supporta il DOM W3C e reinderizzare l'utente a pagine in cui sarà possibile utilizzare questo Menu, è il seguente:
Utilizzo
Prima di spiegare i passi da seguire per creare il vostro Sliding Menu, scaricate il file slidingMenu.js (16.2 KB) oppure slidingMenu.js (10.7 KB), una versione identica ma compressa. Inseritelo poi nella head delle vostre pagine:
Premesso ciò, possiamo focalizzare l'attenzione sulla gestione dello script.
Definire la Gerarchia del Menu
Il primo passo da affrontare per definire la gerarchia del nostro sistema di navigazione, è quello di creare gli elementi che faranno parte del menu, attraverso l'utilizzo del costruttore d'oggetti Menu, la cui sintassi è:
Nel quale i parametri hanno i seguenti significati:
- title
che viene visualizzata nel menu - URL
- back
- MyFunctionName "no"
Nota: La funzione che può essere associata all'elemento può avere al massimo un unico parametro rappresentato proprio dall'URL. Ad esempio la funzione utilizzata negli esempi per lanciare una popup è la seguente:
window.open(URL,"nm","width=350px, height=200px, left=300px, top=100px")
}
Una volta definiti gli elementi del nostro menu, occorrerà stabilire le "parentele" tra loro, in sostanza, se un Menu ne contiene altri e in quel caso quali. Questa operazione è realizzata assegnando la proprietà subMenu Menu
La sintassi per assegnare un subMenu sarà quindi:
In alcune delle demo proposte, ad esempio, la definizione degli elementi del menu e delle loro parentele è realizzata dal seguente codice:
Home.subMenu[0] = CV
Home.subMenu[1] = PortFolio
Home.subMenu[2] = Articoli
Articoli.subMenu[0] = art1
art1.subMenu[0] = v1
art1.subMenu[1] = v2
Articoli.subMenu[1] = art2
Articoli.subMenu[2] = art3
Home.subMenu[3] = Contattami
Definire lo Stile del Menu
Per definire tutti gli aspetti grafici dello Sliding Menu, occorre utilizzare il costruttore d'oggetti ContainerMenu, il vero e proprio DHTML-menu, la cui sintassi è:
boxStylesArray,supStylesArray,cenStylesArray,subStylesArray,
inSupStylesArray,outSupStylesArray,inSubStylesArray,
outSubStylesArray,clickedSupStylesArray,clickedSubStylesArray)
Nel quale possiamo separare i parametri in due classi: parametri di Struttura parametri di Stile
Parametri di Struttura:
- startingMenu
- Hstep
- Vstep
- delay
- launchingFunctionName "no"
Parametri di Stile:
Tutti questi parametri sono destinati a definire gli stili degli elementi dello Sliding Menu; sono tutti dello stesso tipo: array di stili, ovvero array i cui elementi sono stringhe costituite da una coppia "stile=valore", che consente la massima libertà possibile per definire la grafica del sistema di navigazione.
Tutti questi parametri dovranno quindi avere la seguente forma:
//o equivalentemente
ArrayDIStili = ["stile1=valore","stile2=valore",...]
La sintassi utilizzata per la coppia "stile=valore" ricalca quella usata per definire attraverso il JavaScript le proprietà dell'oggetto style
In Cambiare al volo i fogli di stile
- boxStylesArray
I prossimi tre sono i principali array di Stili, relativi rispettivamente ai livelli superiori, centrali e inferiori dello Sliding Menu. Devono obbligatoriamente contenere:
- "position=absolute"
- width height
- un valore per il fontSize
- supStylesArray
- cenStylesArray
- subStylesArray
Gli ultimi parametri si riferiscono agli stili da applicare agli eventi di mouse:
- inSupStylesArray
- outSupStylesArray
- inSubStylesArray
- outSubStylesArray
- clickedSupStylesArray
- clickedSubStylesArray
Il codice utilizzato nell'esempio proposto è:
stiliCenDefault = ["position=absolute","width=100px","height=15px","fontSize=9px",
"backgroundColor=#333333","color=#DDDDDD", "fontFamily=Verdana","textAlign=center","cursor=default"]
stiliSupDefault = ["position=absolute","width=100px","height=15px","fontSize=9px",
"backgroundColor=#DDDDDD","color=#333333", "textAlign=center","cursor=default","fontFamily=Verdana",
"borderLeftStyle=solid","borderLeftWidth=1px","borderLeftColor=#333333"]
stiliSubDefault = ["position=absolute","width=100px","height=15px","fontSize=9px",
"backgroundColor=#DDDDDD","color=#333333", "textAlign=center","cursor=default","fontFamily=Verdana",
"borderLeftStyle=solid","borderLeftWidth=1px","borderLeftColor=#333333",
"borderTopStyle=solid","borderTopWidth=1px","borderTopColor=#333333"]
stiliRollIn =["backgroundColor=#CCCCCC","color=yellow"]
stiliRollOut=["backgroundColor=#DDDDDD","color=#333333"]
MioMenu = new ContainerMenu(Home,null,null,null,"no",
stiliBoxDefault,stiliSupDefault,stiliCenDefault,stiliSubDefault,
stiliRollIn,stiliRollOut)
Altre proprietà e metodi
Una volta definito lo Sliding Menu attraverso l'oggetto ContainerMenu, è possibile controllarne degli altri aspetti definendo opportunamente alcune proprietà:
fixedWidth (intero)
Permette di rendere fissa la lunghezza dello sliding Menu. Un esempio che ne mostra la sintassi potrebbe essere:
MyMenu.fixedWidth = 600 //lo Sliding Menu sarà costantemente lungo 600 pixels
minCPUres (intero)
Si riferisce al numero di millisecondi tra due passi consecutivi dell'animazione. Per default è settato a 10. Modificandolo è possibile rallentare o velocizzare lo sliding nei limiti delle capacità del processore dell'utente. Esempio:
MyMenu.minCPUres = 20
subSliding (true | false)
Se settato a false impedisce che i livelli inferiori seguano lo sliding. Per default è settato a true. Esempio:
MyMenu.subSliding = false
Passiamo infine ai metodi:
MyMenu.open()
Il metodo avvia lo Sliding Menu.
MyMenu.close()
Il metodo chiude lo Sliding Menu. Il metodo andrebbe utilizzato solo nel caso si volesse gestire dinamicamente l'apertura e la chiusura del menu.
MyMenu.initialSubItemsLevel(ArrayDiMenu)
Questo metodo consente di inserire inizialmente nello Sliding Menu dei "feedback-Menu", ovvero oggetti Menu che consentano di ritornare indietro nella gerarchia del sistema di navigazione. Il metodo è usato per garantire una continuità nel menu soprattutto in un suo utilizzo in siti strutturati in multi-pagine.
Il parametro passato è, per l'appunto, un array degli oggetti Menu da inserire inizialmente come feedback nel Menu. Importante è l'ordine degli elementi nell'array, che rispecchierà la successione seguita nella creazione dei livelli inferiori. Un esempio che riprende la gerarchia proposta potrebbe essere:
MyMenu.initialSubItemsLevel([Home,Articoli])
Nota initialSubItemsLevel open
Per capire meglio ciò che è stato descritto finora non resta che vedere degli esempi.
Esempi
In quest'ultima sezione non mi resta che mostrarvi una serie di esempi che potranno spiegarvi meglio il funzionamento e la gestione dello Sliding Menu.
- Menu con feedbacks scelti (solo Home) - esempio
- Menu con lunghezza fissa - esempio
- Menu con stili applicati al click e senza sliding inferiore - esempio
- Menu con stili (default/rollover/click) differenti tra i livelli superiori e inferiori - esempio
Mostro Infine qualche esempio di applicazione reale del menu, utilizzandolo dapprima in un "sito" con una struttura a multi-pagina, e in seguito su uno con struttura a frames/iframes:
- Menu - uso con struttura del sito a multipagina - esempio
- Menu - uso con struttura del sito a frames - esempio
Negli ultimi due esempi implemento un meccanismo per far rimanere coerente il menu alla pagina corrente anche in seguito al reload.
